<template>
	<view class="limit-active">
		<view class="head-bg" v-if="activeList"></view>

		<view v-if="activeList" class="flex-left-right fs-14 padding-15 fixed white-font">
			<!-- <view>优质好货 限时秒杀</view> -->
			<view class="flex" v-if="second||minus||hours||day">
				<text>{{start?'距本场结束':'距本场开始'}}</text>

				<view class="times-style ali-c">
					<text v-if="day>0">{{day}}天</text>
					<text>{{hours}}</text>时
					<text>{{minus}}</text>分
					<text>{{second}}</text>秒
				</view>
			</view>
		</view>
		<view style="height:60rpx;"></view>
		<view class="active-good" v-for="item in activeList" :key="item.id" @click="nowBuy(item)">
			<image :src="imgRemote+item.goods.main_image" mode="aspectFill"></image>
			<view class="info">
				<view class="fs-14 line-2">{{item.goods.name}}</view>
				<view> <progress stroke-width="10" activeColor="#F5991B" backgroundColor="#FFD7C9"
						:percent="parseInt(item.activity_sale/item.activity_num*100)" border-radius="10" show-info font-size="10" />

				</view>
				<view class="limit-num" v-if="item.activity_buy">
					<text> 限{{item.activity_buy}}份</text>
				</view>
				<view class="price">
					<view>
						<text class="red fs-12">￥</text>
						<text class="red fs-16 bold">{{item.activity_price}}</text>
						<text class="gray-font line_through fs-">￥{{item.market_price}}</text>
					</view>
					<view class="go" v-if="start">立即抢</view>
					<view class="go" v-else style="background:gray;color:white;">未开始</view>
				</view>
			</view>
		</view>
		<view class="search_bitmap" v-if="!activeList">
			<image class="bitmap" :src="none" mode="aspectFit"></image>
			<view class="gray_font fs-15">抱歉，没有相关商品哦~</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				imgRemote: getApp().globalData.imgRemote,
				tabs: [{
					name: '12'
				}],
				times: 121212,
				day: '',
				hours: '',
				minus: '',
				second: '',
				activeList: '',
				page: 1,
				limit: 10,
				total: '',
				start: '',
				fx:{},
				none:''
			}
		},
		methods: {
			zhekou() {

				this.$get(this.$api.activityGoods, {
					page: this.page,
					limit: this.limit
				}, res => {
					let data = res.data;
					if (data.code == 1) {
						let time = (new Date() - 0) / 1000;
						let {
							starttime,
							endtime
						} = data.data.activity;
						this.start = time - starttime > 0 ? true : false;
						this.times = this.start ? endtime - time : starttime - time;
						this.getActiveTime()
						this.activeList = [...this.activeList, ...data.data.list.data];
						this.total = data.data.list.total;
						this.fx= data.data.activity;

					}
				})
			},
			format(arg) {
				return parseInt(arg) > 9 ? parseInt(arg) : '0' + parseInt(arg)
			},
			getActiveTime() {
				let times = this.times;

				setInterval(() => {
						times--;
						let day = Math.floor(times / 3600 / 24);
						let hours = Math.floor(times / 3600 % 24);

						let minus = Math.floor(times / 60 % 60);
						let second = Math.floor(times % 60);
						this.day = this.format(day)
						this.hours = this.format(hours);
						this.minus = this.format(minus);
						this.second = this.format(second);

					},
					1000)
			},
			nowBuy(item) {
				uni.navigateTo({
					url: '/pages/index/shopdetail?id=' + item.goods.id + "&time=" + this.times + '&start=' + this
						.start
				})
			}
		},
		onLoad(data) {
			 this.none=this.$imgUrl+'assets/img/no_content.png';
			uni.setNavigationBarTitle({
				title:data.title
			});
			this.zhekou();
		},
		onShareAppMessage() {
		
			let obj = {
				path: '/pages/indexNav/activeLimit'
			};
			
			if (this.fx.fxnames) {
				obj.title = this.fx.fxnames;
			}
			if (this.fx.fximgs) {
				obj.imageUrl = this.fx.fximgs;
			}
		
			return obj;
		
		},
		onReachBottom() {
			if (this.total == this.activeList.length) return
			this.page++;
			this.zhekou();
		}
	}
</script>

<style scoped>
	/* pages/home/timeLimit.wxss */
	page {
		background: #f8f8f8;
	}

	.fixed {
		position: fixed;
		width: 100%;
		padding:30rpx 30rpx 20rpx 30rpx;
			background: #FD313D;
			box-sizing: border-box;
	}

	.head-bg {
		background: #FD313D;
		position: fixed;
		width: 100%;
		height: 60vh;
		top: 0;
		z-index: -1;
		border-radius: 0 0 30rpx 30rpx;
	}

	.limit-active /deep/ .s-tabs-nav-wrap {
		height: 120rpx !important;
	}

	.mp_tab_width {
		height: 100rpx;
	}

	.active-good {
		display: flex;
		background: white;
		border-radius: 15rpx;
		margin: 30rpx;
		padding: 20rpx;
	}

	.only-one {
		margin: 0 30rpx 30rpx;
		border-radius: 15rpx;
		position: relative;
	}

	.times-style {
		/* color: #EB5B42; */
		margin-left: 10rpx;
	}

	.times-style text {
		background: #FD313D;
		color: white;
		padding: 0 4rpx;
		border-radius: 5rpx;
	}

	.limit-num text {
		background: #FD313D;
		color: white;
		font-size: 24rpx;
		padding: 4rpx 20rpx;
		border-radius: 8rpx;
	}

	.active-good image {
		width: 220rpx;
		height: 220rpx;
		border-radius: 10rpx;
		margin-right: 20rpx;
	}

	.active-good .info {
		display: flex;
		flex-direction: column;
		justify-content: space-between;
		flex: 1;
	}

	.active-good .info .price {
		display: flex;

		justify-content: space-between;
		/* align-items: ; */
	}

	.fs-14 {
		font-size: 28rpx;
	}

	.fs-12 {
		font-size: 24rpx;
	}

	.fs-16 {
		font-size: 32rpx;
	}

	.red {
		color: #F7535F;
	}

	.fixed-top {
		position: fixed;
		width: 100%;
		/* z-index: -1; */
		/* background: white; */
	}

	.sale {
		color: gray;
		text-decoration: line-through;
	}

	.bg-r {
		width: 100%;
		background: #FFE048;
		height: 50rpx;
	}

	.go {
		background: #FD313D;
		color: white;
		border-radius: 20rpx;
		font-size: 28rpx;
		padding: 4rpx 20rpx;
	}
	
	 .search_bitmap {
		margin-top: 10%;
		text-align: center;
	}
	
	 .search_bitmap .bitmap {
		width: 69%;
	}
</style>
